<template>
  <div class="articles">

    <banner></banner>
    <div class="site-content animate">
      <!-- 文章目录 -->
      <div id="article-menus" style="position: sticky;height: 0;padding: 0">
        <a>目录</a>
        <menu-tree :menus="menus" child-label="child"></menu-tree>
      </div>

      <main class="site-main">

        <article class="hentry">
          <!-- 文章头部 -->
          <header class="entry-header">
            <!-- 标题输出 -->
            <h1 class="entry-title" style="display: inline-block">{{ article.blogTitle }}</h1>
            <div class="breadcrumbs" style="display: inline-block;padding-left: 3%;">
              <div> 发布时间：{{ article.createTime }}</div>
            </div>
            <div>
              <a-tag v-for="item in tags" :color="'#'+(Math.random()*0xFFFFFF<<0).toString(16)">
                <router-link :to="`/tag/${item}`">
                  {{item}}
                </router-link>
              </a-tag>
            </div>


            <hr>

          </header>
          <!-- 正文输出 -->
          <div class="entry-content">
            <blogContent :blogContent="this.article.blogContent"></blogContent>
          </div>
          <!-- 文章底部 -->
          <section-title>

            <footer class="post-footer">

              <div class="post-like">
                <i class="iconfont iconmeditor-time"></i>
                <span class="count">最后更新于：{{ article.updateTime }}</span>
              </div>
              <!-- 阅读次数 -->
              <div class="post-like">
                <i class="iconfont iconeyes"></i>
                <span class="count">{{ article.blogViews }}</span>
              </div>
              <!-- 分享按钮 -->
              <!--                        <div class="post-share">-->
              <!--                            <ul class="sharehidden">-->
              <!--                                <li><a href="http://qr.liantu.com/api.php?text=https://zhebk.cn/Web/gongan.html"-->
              <!--                                       onclick="window.open(this.href, 'renren-share', 'width=490,height=700');return false;"-->
              <!--                                       class="s-weixin" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/wechat.png"></a></li>-->
              <!--                                <li>-->
              <!--                                    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://zhebk.cn/Web/gongan.html/&amp;title=公安联网备案记录"-->
              <!--                                       onclick="window.open(this.href, 'weibo-share', 'width=730,height=500');return false;"-->
              <!--                                       class="s-qq" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/qzone.png"></a></li>-->
              <!--                                <li>-->
              <!--                                    <a href="http://service.weibo.com/share/share.php?url=https://zhebk.cn/Web/gongan.html/&amp;title=公安联网备案记录"-->
              <!--                                       onclick="window.open(this.href, 'weibo-share', 'width=550,height=235');return false;"-->
              <!--                                       class="s-sina" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/sina.png"></a></li>-->
              <!--                                <li>-->
              <!--                                    <a href="http://shuo.douban.com/!service/share?https://zhebk.cn/Web/gongan.html/&amp;title=公安联网备案记录"-->
              <!--                                       onclick="window.open(this.href, 'renren-share', 'width=490,height=600');return false;"-->
              <!--                                       class="s-douban" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/douban.png"></a></li>-->
              <!--                            </ul>-->
              <!--                            <i class="iconfont show-share"></i>-->
              <!--                        </div>-->
              <!-- 赞助按钮 -->
              <div class="donate" @click="showDonate=!showDonate">
                <span>赏</span>
                <ul class="donate_inner" :class="{'show':showDonate}">
                  <li class="wedonate"><img :src="websiteInfo.wedonate" alt="☁">
                    <p>微信</p></li>
                  <li class="alidonate"><img :src="websiteInfo.alidonate" alt="☁">
                    <p>支付宝</p></li>
                </ul>
              </div>
              <!-- 文章标签 -->
              <div class="post-tags">
                <i class="iconfont iconcategory"></i>
                <router-link :to="`/category/${article.blogCategoryName}`">{{article.blogCategoryName}}</router-link>
              </div>
            </footer>
          </section-title>

          <!--声明-->
          <div class="open-message">
            <p>声明：本博客|版权所有，违者必究|如未注明，均为原创|本网站采用
              <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/"
                 target="_blank">BY-NC-SA</a>协议进行授权</p>
            <p>转载：转载请注明原文链接 - <a :href="href()">{{ article.blogTitle }}</a></p>
          </div>
          <!--评论-->
          <h1 id="pl" v-if="this.article.enableComment===0">评论:</h1>
          <reply v-if="this.article.enableComment===0" :content="{'blogId':this.article.blogId}" :pageNo="this.pageNo" :pageSize="this.pageSize"
                 @parentFun="onCommentPageChange"></reply>
          <!--留言-->
          <h1 v-if="this.article.enableComment===0">留言:</h1>
          <a-spin v-if="this.article.enableComment===0" tip="加载中..." :spinning="spinning" size="large" style="padding-bottom: 2%">
            <a-empty v-if="total===0"/>
            <div v-for="content in contents" :key="content">
              <blogComment
                  :content="content"
                  @parentFun="onCommentPageChange"
              ></blogComment>
            </div>

            <div>
              <a-pagination
                  style="display: inline-flex;padding-right: 1%"
                  size="small"
                  :total="total"
                  show-size-changer
                  show-quick-jumper
                  :defaultPage="pageNo"
                  :defaultPageSize="pageSize"
                  :pageSizeOptions="['5', '10', '20', '40']"
                  :show-total="total => `共 ${total} 条`"
                  @change="onCommentPageChange"
                  @showSizeChange="onCommentPageChange"/>
              <a-button
                  type="default"
                  shape="circle"
                  icon="reload"
                  size="small"
                  :loading="iconLoading"
                  @click="onCommentPageChange(pageNo,pageSize)"></a-button>
            </div>
          </a-spin>

        </article>
      </main>
    </div>
  </div>
</template>

<script>

import Banner from '@/components/banner'
import sectionTitle from '@/components/section-title'
import comment from '@/components/comment'
import menuTree from '@/components/menu-tree'
import {articleInfo, blogCommentPage, blogCommentTreePage, view} from '../api'
import blogContent from '@/components/blogContent'
import blogComment from "@/components/comment/blogComment";
import blogChildrenComment from "@/components/comment/blogChildrenComment";
import {getTimer} from "@/utils/util";
import Reply from "@/components/comment/reply";


export default {
  name: 'articles',
  data() {
    return {
      showDonate: false,
      comments: [],
      menus: [],
      article: {},
      contents: [],
      total: 0,
      iconLoading: false,
      pageSize: 5,
      pageNo: 1,
      spinning: false,
      websiteInfo:{},
      tags:[]
    }
  },
  components: {
    Reply,
    Banner,
    sectionTitle,
    comment,
    menuTree,
    blogContent,
    blogComment,
    blogChildrenComment,
  },
  methods: {
    fetchH(arr, left, right) {
      if (right) {
        return arr.filter(item => item.offsetTop > left && item.offsetTop < right)
      } else {
        return arr.filter(item => item.offsetTop > left)
      }
    },
    // 生成目录
    createMenus() {
      let arr = []
      for (let i = 3; i > 0; i--) {
        let temp = []
        let e = document.querySelector(".v-show-content").querySelectorAll(`h${i}`)
        for (let j = 0; j < e.length; j++) {
          let child = this.fetchH(arr, e[j].offsetTop, (j + 1 === e.length) ? undefined : e[j + 1].offsetTop)
          temp.push({
            h: i,
            title: e[j].innerText,
            //mavon-editor 的锚点在 h标签 内的 a标签 中
            id: e[j].querySelectorAll('a')[0].id,
            offsetTop: e[j].offsetTop,
            child: child
          })
        }
        if (temp.length) {
          arr = temp
        }
      }
      this.menus = arr

    },
    getArticle() {
      let that = this;
      articleInfo(location.pathname).then((res) => {
        if (res.data === null) {
          that.$router.push({path: '/404'})
          return
        }
        res.data.createTime = res.data.createTime.substring(0, 10)
        res.data.updateTime = res.data.updateTime.substring(0, 10)
        that.article = res.data
        that.tags = res.data.blogTags.split(",")
        document.title = res.data.blogTitle
        that.onCommentPageChange()
        setTimeout(function () {
          that.createMenus()
        }, 100)
        view(res.data.blogId)

      })



    },
    href() {
      return location.href
    },
    onCommentPageChange(page, pageSize) {
      if (pageSize !== undefined) {
        this.pageSize = pageSize
      }
      if (page !== undefined) {
        this.pageNo = page
      }
      this.iconLoading = true
      this.spinning = true
/*     blogCommentPage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        blogId: this.article.blogId,
        isParent: true
      }).then((res) => {
        for (let i = 0; i < res.data.rows.length; i++) {
          res.data.rows[i].createTime_fast = getTimer(res.data.rows[i].createTime)
        }
        this.contents = res.data.rows
        this.total = res.data.totalRows
        this.iconLoading = false
        this.spinning = false
      })*/


      blogCommentTreePage({
        page: this.pageNo,
        size: this.pageSize,
        blogId: this.article.blogId,
      }).then((res) => {

        for (let i = 0; i < res.data.rows.length; i++) {
          res.data.rows[i].createTime_fast = getTimer(res.data.rows[i].createTime)
        }
        this.contents = res.data.rows
        this.total = res.data.totalRows
        this.iconLoading = false
        this.spinning = false

      })
    },
    getWebSiteInfo() {
      this.$store.dispatch('getSiteInfo').then(data => {
        this.websiteInfo = data
      })
    }

  },
  mounted() {
    this.getArticle()
    this.getWebSiteInfo()
    const that = this
    setInterval(function () {
      that.onCommentPageChange()
    },120000)

    if(this.$route.hash==="#pl"){
     setTimeout(function () {
       document.getElementById("pl").scrollIntoView();
     },1000)
    }

  },
  created() {

  }
}
</script>
<style scoped lang="less">
.site-content {
  position: relative;

  .site-main {
    margin-top: 0%;
    padding: 80px 0 0 0;
  }
}

#article-menus {
  position: absolute;
  top: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  border-radius: 3px;
  padding: 15px;
  width: 15vw;
  transform: translateX(-120%) translateY(150px);
  font-size: 14px;
}


article.hentry {
  .entry-header {
    .entry-title {
      font-size: 23px;
      font-weight: 600;
      color: #737373;
      margin: 0.67em 0;

      &:before {
        content: "#";
        margin-right: 6px;
        color: #d82e16;
        font-size: 20px;
        font-weight: 600;
      }
    }

    hr {
      height: 1px;
      border: 0;
      background: #EFEFEF;
      margin: 15px 0;
    }

    .breadcrumbs {
      font-size: 14px;
      color: #D2D2D2;
      text-decoration: none;
      margin-bottom: 30px;
    }
  }

  .entry-content {
  }

  footer.post-footer {
    width: 100%;
    padding: 20px 10px;
    margin-top: 30px;
    height: 65px;
    position: relative;

    i {
      font-size: 18px;
      margin-right: 5px;
    }

    .post-like {
      float: right;
      margin: 7px 0 0 20px;
    }

    .post-share {
      float: right;
      list-style: none;
      margin-right: 20px;
    }

    .donate {
      float: left;
      line-height: 36px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border: 1px solid #2B2B2B;

      &:hover {
        border: 1px solid goldenrod;

        span {
          color: goldenrod;
        }
      }

      span {
        color: #2B2B2B;
        padding: 10px;
        position: relative;
        cursor: pointer;
      }

      .donate_inner {
        z-index: 9999;
        display: none;
        margin: 0;
        list-style: none;
        position: absolute;
        left: 80px;
        top: -40px;
        background: #FFF;
        padding: 10px;
        border: 1px solid #ddd;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
        border-radius: 3px;

        &.show {
          display: block;
        }

        li {
          float: left;
        }

        img {
          width: 100px;
        }

        p {
          text-align: center;
          font-size: 15px;
          color: #D2D2D2;
          line-height: 1rem;
        }
      }

      .donate_inner:after, .donate_inner:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 45%;
        margin-left: -8px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
      }

      .donate_inner:before {
        left: -1px;
        border-right: 8px solid #ddd;
      }

    }

    .post-tags {
      margin: 7px 0 0 20px;
      float: left;
      text-transform: uppercase;

      a:hover {
        color: #ff6d6d;
      }
    }
  }

  .open-message {
    margin: 50px 0;
    position: relative;
    background: #2B2B2B;
    padding: 10px 30px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;

    &:after {
      content: "";
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #2B2B2B;
      position: absolute;
      top: -8px;
      left: 48%;
    }

    p {
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre-line;
    }

    a {
      color: #A0DAD0;
      padding: 0 5px;
    }
  }
}

</style>
<style scoped>
.ant-pagination {
  text-align: center;
}

.ant-comment-inner {
  padding: 0;
}
@media (max-width: 1600px){
  #article-menus {display: none;}
}
</style>
